<template>
  <div id="home">
    <!-- 头 -->
    <app-header :name="name"></app-header>

    <!-- 上半部内容 -->
    <div class="headerBg">
      <!-- swiper轮播图 -->
      <Swiper :swiper="dataList.swiper" />

      <!-- 导航列表 -->
      <NavList :navList="dataList.navList" :navListStyle="'navListStyle'" />

      <!-- 条幅 -->
      <scroll :img="dataList.scroll_1"></scroll>
    </div>

    <seckill></seckill>
    <commodityContOne></commodityContOne>
    <div class="recommend">
      <div class="title">
        <span>猜 你 喜 欢</span>
        <div></div>
      </div>
      <div class="productList">
        <productList :ulw2="'ulW2'" :productList="data.productList"></productList>
      </div>
    </div>
    <div class="footer">
      <div class="download">
        <ul v-for="(item, index) in download" :key="index">
          <li><img :src="item.ico" alt="" srcset=""></li>
          <li>{{item.txt}}</li>
        </ul>
      </div>
    </div>
    <app-footer></app-footer>
  </div>
</template>

<script>
import Header from '@/components/Header'
import NavList from '@/components/NavList'
import Swiper from '@/components/Swiper'
import Scroll from '@/components/HomePage/Scroll'
import Seckill from '@/components/HomePage/Seckill'
import CommodityContOne from '@/components/HomePage/CommodityContOne'
import Footer from '@/components/Common/Footer'
import productList from '@/components/My/module/ProductList'

export default {
  name: 'home',
  components: {
    'app-header': Header,
    Swiper,
    NavList,
    'scroll': Scroll,
    'seckill': Seckill,
    'commodityContOne': CommodityContOne,
    'app-footer': Footer,
    productList
  },
  data () {
    return {
      name: 'home',
      dataList: '',
      data: '',
      download: [
        { ico: '../../static/image/my/list/ico/APP.png', txt: '客户端' },
        { ico: '../../static/image/my/list/ico/国际.png', txt: '国际端' },
        { ico: '../../static/image/my/list/ico/PC.png', txt: '电脑端' }
      ]
    }
  },
  created () {
    fetch('../../static/json/dataList.json').then(item =>
      item.json()
    ).then(items => {
      this.dataList = items.home
      console.log(this.dataList)
    })
    this.axios.get('../../static/json/data.json').then(item => {
      this.data = item.data.data
      console.log(this.data)
    })
  },
  mounted () {
  },
  methods: {

  }
}
</script>
<style lang="less">
.navListStyle {
  width: 20%;
}
</style>
<style lang="less" scoped>
#home {
  .headerBg {
    background: url(../../static/image/bg/bg-blue.jpg) no-repeat;
  }
  .recommend {
    .title {
      padding: 20px;
      position: relative;
      text-align: center;
      span {
        font-weight: 900;
        font-size: 32px; /*px*/
        padding: 0 25px;
        background: linear-gradient(
          left,
          rgba(255, 0, 255, 1),
          rgba(0, 255, 255, 1) ;
        );
        -webkit-background-clip: text;
        color: rgba(0, 0, 0, 0);
      }
    }
  }
  .footer {
    background: rgba(255, 255, 255, 1);
    .myFooter {
      width: 100%;
      padding: 30px 0;
      display: flex;
      justify-content: space-around;
      border-bottom: 1px solid rgba(155, 155, 155, 1);
      li {
        text-align: center;
        width: 25%;
        border-right: 1px solid rgba(88, 88, 88, 1);
      }
      li:nth-of-type {
        border: none;
      }
    }
    .download {
      padding: 15px 0;
      display: flex;
      justify-content: space-between;
      ul {
        width: 33.33%;
        li {
          display: flex;
          justify-content: center;
          img {
            height: 64px;
          }
        }
      }
    }
  }
}
</style>
